<template>
  <div>
      <div class="titleWrapper">
        <div class="middleLine"></div>
        <div class="title">猜你喜欢</div>
      </div>

      <van-list
        class="contentWrapper"
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <div class="wrapper" v-for="(item,index) in goodslist" :key="index" >
            <div class="content" >
                <div class="imageWrapper">
                    <div class="LazyLoad is-visible" @click="onClick(item.id)">
                        <img :src="item.small_image" style="width: 100%;">
                    </div>
                </div>
                <div class="infoWrapper">
                    <div class="name">
                        <span class="nameText">{{item.name}}</span>
                    </div>
                    <div class="tagsWrapper">
                        <div class="H1B9Rvu"></div>
                    </div>
                    <div class="priceWrapper">
                        <div class="priceInfo">
                            <div class="pricePart">
                                <div class="price">
                                    ￥<span class="f34">{{item.price}}</span>
                                </div>
                                <div class="originPrice">￥{{item.origin_price}}</div>
                            </div>
                        </div>
                        <div class="iconCartWrapper" @click="addCart(item)">
                            <svg viewBox="0 0 52 52" class="icon iconCart">
                                <defs>
                                    <radialGradient cx="27.0288363%" cy="10.3693483%" fx="27.0288363%" fy="10.3693483%" r="93.8427229%" id="radialGradient-1">
                                        <stop stop-color="#4ECA75" offset="0%"></stop><stop stop-color="#39B460" offset="100%"></stop>
                                    </radialGradient>
                                </defs>
                                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                    <g transform="translate(-678.000000, -2742.000000)"><g transform="translate(678.000000, 2742.000000)">
                                        <rect fill="url(#radialGradient-1)" x="0" y="0" width="51.8699976" height="51.8699976" rx="25.9349988"></rect><path fill="#FFFFFF" d="M20.3666667,39 C19.1700497,39 18.2,38.0299503 18.2,36.8333333 C18.2,35.6367164 19.1700497,34.6666667 20.3666667,34.6666667 C21.5632836,34.6666667 22.5333333,35.6367164 22.5333333,36.8333333 C22.5333333,38.0299503 21.5632836,39 20.3666667,39 Z M33.3666667,38.1333333 C32.1700497,38.1333333 31.2,37.1632836 31.2,35.9666667 C31.2,34.7700497 32.1700497,33.8 33.3666667,33.8 C34.5632836,33.8 35.5333333,34.7700497 35.5333333,35.9666667 C35.5333333,37.1632836 34.5632836,38.1333333 33.3666667,38.1333333 Z"></path><path stroke="#FFFFFF" stroke-width="2.6" stroke-linecap="round" d="M12.1333333,13.8666667 L13.6768756,13.8666667 C15.4621209,13.8666667 16.9554584,15.222463 17.1274221,16.9994069 L18.2224287,28.314386 C18.4068512,30.2200702 20.1012175,31.6154285 22.0069016,31.431006 C22.0111286,31.4305969 22.0153548,31.4301801 22.0195802,31.4297555 L33.2997819,30.296256 C34.7947282,30.1460352 36.0227397,29.0499108 36.3411182,27.581556 L37.8958814,20.4110205 C38.0987345,19.4754663 37.5047629,18.5526049 36.5692087,18.3497518 C36.3853963,18.3098964 36.1963225,18.3002236 36.0094025,18.3211126 L22.8968424,19.7864909">
                                    </path>
                                    </g>
                                    </g>
                                </g>
                            </svg>
                        </div>
                    </div>
                </div>
            </div>
        </div>
      </van-list>
  </div>

</template>

<script>
  import {getHomeData} from '../../../api'
  import {addCart} from '../../../api/cart'
  import { Toast } from 'vant';
  export default {
    name:'YouLike',
    props:['goodslist'],
    //必须的  如果父传子 子组件想改变传递的数据（vue不希望  因为是单向数据流）v-model
    props:['value'],
    data() {
        return {
          loading: false,
          finished: false,
          goodslist:this.value
        };
    },
    mounted() {
      this.$nextTick(() => {
        this.$store.commit('setLoadCount')
      })
    },
    methods: {
      async onLoad() {
        // 异步更新数据
         const {data} = await getHomeData()
         this.goodslist = this.goodslist.concat(data.data.list[12].product_list)
          // 加载状态结束
          this.loading = false;

          // 数据全部加载完成
          if (data.data.list[12].product_list.length == 0) {
            this.finished = true;
          }

      },
      onClick(id) {
        this.$router.push(`/home/detail/${id}`)
      },

      // 添加购物车
      async addCart(item){

        try{
          const datas = {
            goods_id: item.id,
            goods_name: item.name,
            goods_price: item.price,
            small_image: item.small_image,
            user_id: this.$store.getters.getUserInfo.token
          }
          const {data} = await addCart(datas)
          if(data.success_code == 200){
            Toast('已加入购物车')
            // 2021/9/25 获取本地存储数据 yyb
            this.$store.commit('setCartList',datas)
          }
        }catch(e){
          Toast('网络异常，请稍后重试')
        }
      }
    },
  }
</script>

<style scoped>
  .wrapper {
      /* margin-top: 0.625rem; */
  }
  .titleWrapper {
      margin-top: 20px;
      position: relative;
      padding: 0 0.625rem;
      line-height: 1.1875rem;
      text-align: center;
  }
  .middleLine {
      padding-top: 1.09375rem;
      border-bottom: solid 1px #D8D8D8;
  }

  .title {
      position: relative;
      display: inline-block;
      top: -1.09375rem;
      padding: 0 1.25rem;
      line-height: 1.895rem;
      font-size: 1rem;
      background: #F5F5F5;
  }

  .noticeGreen, .noticeGray {
      left: 0;
      right: 0;
      bottom: 0;
  }

  .contentWrapper{
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
  }
  .contentWrapper .wrapper{
      position: relative;
      width: 45%;
      display: inline-block;
      padding: 0.4825rem 0;
      vertical-align: top;
  }

  .content {
      background: #FFF;
      border-radius: 0.3125rem;
      overflow: hidden;
  }

  .imageWrapper {
      position: relative;
      height: 0;
      padding-bottom: 100%;
      overflow: hidden;
      background: url("https://img.ddimg.mobi/assets/h5/product-img-load.png") no-repeat;
      background-size: 100% 100%;
      border-radius: 0.3125rem;
  }

  .imageWrapper > div:first-child {
      padding: 0.625rem;
  }

  .image {
      width: 100%;
      height: auto;
      display: block;
      border-radius: 0.1875rem;
  }

  .infoWrapper {
      padding: 0 0.625rem 0.625rem 0.625rem;
  }

  .name {
      height: 2.5rem;
      line-height: 1.25rem;
      font-size: 0.875rem;
      color: #333333;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
  }

  .name .nameText {
      vertical-align: middle;
      /* font-size: 1.5rem; */
  }

  .tagsWrapper {
      margin: 0.125rem 0;
      height: 1.0625rem;
      line-height: 0.8125rem;
      overflow: hidden; }

  .tag + .tag {
      margin-left: 0.3125rem;
  }

  @media screen and (min-width: 0px) and (max-width: 320px) {
      .tag + .tag {
          margin-left: 0.125rem;
      }
  }

  .H1B9Rvu {
      height: 1rem;
  }

  .priceWrapper {
      display: table;
      line-height: 1.895rem;
      width: 100%;
  }
  .priceWrapper .priceInfo {
      height: 2.5rem;
      display: table-cell;
      vertical-align: middle;
  }

  .priceWrapper .priceInfo .pricePart {
      height: 1.25rem;
      position: relative;
  }

  .priceWrapper .priceInfo .pricePart .price {
      display: inline-block;
      height: 1.25rem;
      line-height: 1.25rem;
      font-weight: bold;
      font-size: 0.75rem;
      color: #FE6263;
  }

  .priceWrapper .priceInfo .pricePart .originPrice {
      display: inline-block;
      vertical-align: bottom;
      margin-left: 0.3125rem;
      height: 1.25rem;
      line-height: 1.25rem;
      text-decoration: line-through;
      font-size: 0.6875rem;
      color: #B2B2B2;
      position: absolute;
      top: 0.15625rem;
  }

  .priceWrapper .iconCartWrapper {
      position: relative;
      display: table-cell;
      vertical-align: middle;
  }

  .priceWrapper .iconCartWrapper .iconCart {
      position: absolute;
      right: 0;
      top: 50%;
      margin-top: -0.9375rem;
      display: block;
      width: 1.875rem;
      height: 1.875rem;
  }
</style>
